<template>
  <!--1.首先，弹窗页面中要有el-dialog组件即弹窗组件，我们把弹窗中的内容放在el-dialog组件中-->
  <!--2.设置:visible.sync属性，动态绑定一个布尔值，通过这个属性来控制弹窗是否弹出-->
  <el-dialog title="管理团队" :visible.sync="detailVisible" width="50%">
    <el-transfer
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入姓名"
      v-model="personvalue"
      :data="persondata"
      :titles="['人员', '已有人员']"
    >
    </el-transfer>
    <span slot="footer" class="dialog-footer">
        <el-button @click="cancelRoleDig()">取 消</el-button>
        <el-button type="primary" @click="addPersonToGroupInfo()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addUserTogroup, manageGroup } from '@/api/group'

export default {
  name: 'dialogComponentManagerGroup',
  data() {
    return {
      groupid:'',
      detailVisible: false,
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1
      },
      personvalue: [],
      persondata: [],
      allpersons:[]
    }
  },
  methods: {
    //3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
    init(row) {
      this.groupid = row.gid
      this.detailVisible = true
      // 这里可以发送请求获取初始值
      manageGroup(row.gname).then((res)=>{
        this.allpersons = res.data.inGroup.concat(res.data.notInGroup)
        this.persondata = this.generateData()
        res.data.inGroup.forEach(item=>{
          this.personvalue.push(item.uid)
        })
      })
    },
    generateData(){
      const data = []
      for (let i = 0; i < this.allpersons.length; i++) {
        data.push({
          label: this.allpersons[i].userName,
          key: this.allpersons[i].uid,
          pinyin: this.allpersons[i].userName
        })
      }
      return data
    },
    change(val) {
      // console.log(val);
      console.log(this.value)
    },
    noshow() {
      this.detailVisible = false
    },
    changeUserInfoSuccess(title, message) {
      this.$notify({
        title: title,
        message: message,
        type: 'success',
        duration: 2000
      })
    },
    addPersonToGroupInfo() {
      this.detailVisible = false
      addUserTogroup(this.groupid,this.personvalue).then(res=>{
        // 这里是回调函数
        if (res.code != 200) return this.changeUserInfoSuccess('失败', '添加用户失败！')
        this.changeUserInfoSuccess('成功', '添加用户成功！')
        this.$emit("UpdateData")
      })
      this.persondata = []
      this.allpersons = []
      this.personvalue = []
    },
    cancelRoleDig(){
      this.detailVisible = false
      this.persondata = []
      this.allpersons = []
      this.personvalue = []
    }
  }
}
</script>
